<template>
    <div class="tree">
        <el-tree
            class="scroll_bar"
            :style="{height: treeHeight}"
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
        >
            <template slot-scope="{ node }">
                <span :title="node.label">{{node.label}}</span>
            </template>
        </el-tree>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { getcategoryLibrary } from '@/api/materials/concreteMirtune'
import { parseList, debounce } from '@/pages/materialsmanagement/utils/common'
export default {
    data () {
        return {
            searchKey: '',
            treeData: [],
            defaultProps: {
                children: 'children',
                label: 'className'
            },
            screenWidth: 0,
            screenHeight: 0,
            parentClassName: '',
        }
    },
    computed: {
        ...mapState(['userInfo']),
        treeHeight () {
            return (this.screenHeight - 125) + 'px'
        },
    },
    created () {
        this.getTreeData()
    },
    mounted () {
        // 获取屏幕宽高
        this.getScreenInfo()
        window.addEventListener('resize', debounce(this.getScreenInfo))
    },
    methods: {
        async getTreeData () {
            const data =  await getcategoryLibrary()
            parseList(data, 'billId', 'parentClassId', '0')
            // data.forEach(item=>{
            //     })
            console.log('data', data)
            this.treeData.push(data[data.length - 1])

        },
        handleNodeClick ({ className, unit, billId, isDetailed, spec }) {
            this.treeData.forEach(a=>{
                a.children.forEach(b=>{
                    if(b.children) {
                        b.children.forEach(c=>{
                            if(c.className === className) {
                                this.parentClassName = b.className
                            }
                        })
                    }else{
                        if( b.className === className) {
                            this.parentClassName = a.className
                        }
                    }

                })
            })
            this.$emit('select', {
                className,
                parentClassName: this.parentClassName,
                unit,
                billId,
                isDetailed,
                spec
            })
        },
        onSearch (e) {
            let searchKey = e
            if (typeof e === 'object') {
                searchKey = this.searchKey
            }
            console.log(searchKey)
        },
        getScreenInfo () {
            let screenWidth = document.documentElement.clientWidth || document.body.clientWidth
            let screenHeight = document.documentElement.clientHeight || document.body.clientHeight
            this.screenWidth = screenWidth
            this.screenHeight = screenHeight
        },
    }
}
</script>

<style lang="scss" scoped>
    .tree{
        .search_box {
            position: fixed; left: 11px; top: 0; z-index: 2; padding: 10px 0 0; width: 246px; flex-direction: column; background: #fff;
        }
        .name {
            margin: 0 0 15px;
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-weight: 700;
            background-color: rgb(224, 231, 249);
        }
        .el-tree{
            overflow-y: auto;
        }
        ::v-deep.el-tree-node>.el-tree-node__children {
            width: 800px;
            &::-webkit-scrollbar {
                height: 8px;
            }
            &:hover{
                &::-webkit-scrollbar-thumb {
                    background: rgba(204, 204, 204, 0.8);
                    &:hover{
                        background: rgba(204, 204, 204, 1);
                    }
                }
            }
        }
    }
</style>